<template>
	<view>
		<!-- 搜索服务 -->
	
		<searces :slist='select_lists' :addr='city'></searces>
		<!-- 列表 -->
		<view v-if="dataList.length==0">
			<u-empty text="没有搜索结果" mode="search" ></u-empty>
		</view>
		<!-- 列表 -->
		
			<view class="list">
				<view class="lists" v-for="(item, index) in dataList" :key="index">
					<view class="lists_img"><image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4191773791,249220039&fm=26&gp=0.jpg" mode="aspectFill"></image></view>
					<view class="lists_infor">
						<view class="list_top">{{item.cmsServiceAll.serviceSubdivide}}</view>
						<view class="list_center">{{item.cmsServiceAll.serviceInner}}</view>
						<view>
							<text class="list_price">￥</text>
							<text class="num">{{item.cmsServiceAll.storeAboutPrice}}</text>
							<text class="youhui">预约优惠30%</text>
							<text class="sold">已售{{item.cmsServiceAll.serviceCount}}</text>
						</view>
						<view class="list_bottom">
							<view class="bottom_img"></view>
							<view class="bottom_text">
								<view class="name">{{item.designerName}}</view>
								<view class="ico_x">
									<view>
										<text class="icon iconfont" v-for="(items,index1) in item.starRating" :key='index1'>&#xe621;</text>
										
									</view>
								</view>
							</view>
							<view class="distance">{{discountFilter(item.longitudeLatitude)}}km</view>
						</view>
					</view>
				</view>
				
			</view>
		
		
	</view>
</template>

<script>
	import searces from '../search_public/search.vue'
	import {getFeatured} from '@/api/index.js'
	import {checkedId} from '@/utils/xuehua.js'
	export default {
		data(){
			return{
				select_lists: ['洗发', '剪发', '烫发', '染发', '护发', '头皮', '接发'],
				city:'',
				page:1,
				dataList:[],
				Refresh:0
			}
		},
		components:{
			searces
		},
		methods:{
			//从首页进来获取数据
			getInfors(){
				let data = {
					city:this.city,
					page:this.page
				}
				getFeatured(data).then(res=>{
					let result = checkedId(res[1].data)
					if(result.data.length>0){
						this.dataList = this.dataList.concat(result.data)
						console.log(this.dataList,'dataList')
					}else{
						uni.showToast({
							icon:'none',
							title:'暂无更多数据'
						})
					}
				})
			},
			//计算距离   //实在不知道怎么取名字了..就用xxx代表了
			discountFilter(xxx){
				let that = this
				that.getLonLa()
				var radLat1 = that.Latitude * Math.PI / 180.0;
				var LadLat2 = xxx.split(',')[1]* Math.PI / 180.0;
				var La3 = radLat1 - LadLat2;
				var Lb3 = that.Longitude * Math.PI / 180.0 - xxx.split(',')[0] * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(radLat1) * Math.cos(LadLat2) * Math.pow(Math.sin(Lb3 / 2), 2)));
				s = s * 6378.137;//地球半径
				s = Math.round(s * 10000) / 10000;
				console.log("计算结果",s);
				return (s/1000).toFixed(2);
				
			},
			// 获取当前的经纬度
			getLonLa(){
				let that = this 
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						that.Longitude = res.longitude
						that.Latitude = res.latitude
						
						 
					}
				})
			},
		},
		created(){
		let that = this
			this.$nextTick(function(){
					console.log(that.city)
			})
			
		},
	async	onLoad(option) {
		let that = this
			function a(){
				that.city = option.city
			}
			await a()
			this.getInfors()
			//调用第一次的接口
		
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.Refresh = 0
			this.getInfors()
		},
		//上拉加载
		onReachBottom(){
			if(this.Refresh == 0){
				this.page++
				this.getInfors()
			}else{
				this.page=1
			}
			
		}
	}
</script>

<style scoped lang="less">
	.list{
		padding: 25rpx 25rpx;
		display: flex;
		justify-content:space-between;
		
		flex-wrap: wrap;
	}
	.lists {
		// margin-right: 10%;
		width: 345rpx;
		// height: 486rpx;
		// margin-right: 10rpx;
		// border: 1rpx blue solid;
		margin-bottom: 10rpx;
	
		background: #ffffff;
		box-shadow: -4rpx 0px 7rpx 0px rgba(203, 203, 203, 0.47);
		border-radius: 4rpx;
	
		.lists_img {
			width: 100%;
			height: 300rpx;
			background: #00c6c2;
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.lists_infor {
			padding: 15rpx 10rpx;
	
			.list_top {
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #333333;
				line-height: 30rpx;
			}
	
			.list_center {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
				margin-top: 9rpx;
			}
	
			.list_price {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
	
			.num {
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #333333;
				line-height: 30rpx;
			}
	
			.youhui {
				font-size: 16rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #00c6c2;
				margin-left: 10rpx;
			}
	
			.sold {
				font-size: 16rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #707070;
				line-height: 30px;
				float: right;
			}
	
			.list_bottom {
				display: flex;
				position: relative;
				width: 100%;
				.bottom_img {
					width: 40rpx;
					height: 40rpx;
					background: #00c6c2;
					border-radius: 50%;
				}
	
				.bottom_text {
					margin-left: 15rpx;
					.name {
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #4e4e4e;
					}
	
					.ico_x {
						height: 20rpx;
						line-height: 9rpx;
						.iconfont {
							color: #f2cb51;
							font-size: 16rpx;
						}
					}
				}
	
				.distance {
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 16rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #969696;
					line-height: 30rpx;
				}
			}
		}
	}
</style>
